import QtQuick 2.13
import QtQuick.Controls 2.5
import QtMultimedia 5.4


Page {

    property bool isAniEnabled: false
    property bool isTasteVisited: false
    signal backFromAutoSetting()
    signal home()


    Timer {
        id: timerShowWhite
        repeat: false
        interval: 55*1000
        onTriggered: {
            resetAniOther()
        }
    }


    Timer {
        id: timerLig
        repeat: true
        interval: 600
        onTriggered: {
            if (lig.opacity === 0) {
                lig.opacity = 1
            } else {
                lig.opacity = 0
            }
        }
    }

    MediaPlayer {
        id: sound_taskStart
        source: "qrc:/sound/taskStart.mp3"
    }

    MediaPlayer {
        id: sound_taskFinished
        source: "qrc:/sound/taskCompleted.mp3"
    }

    Rectangle {
        id: sideMenuHome
        width: 200
        height: 1080
        color: "black"
        opacity: 0
        anchors.right: parent.right
        anchors.rightMargin: -1
        anchors.top: parent.top
        border.color: Qt.rgba(255,255,255,0.2)
        border.width: 1
        Behavior on opacity { enabled: isAniEnabled; PropertyAnimation{duration:800}}
        z: 10

        Rectangle {
            width: 200
            height: 193
            color: "transparent"

            Image {
                id: imgHome
                width: 48
                height: 48
                anchors.top: parent.top
                anchors.topMargin: 70
                anchors.horizontalCenter: parent.horizontalCenter
                source: "qrc:/imgs/home.png"
                Behavior on scale { PropertyAnimation{duration:200}}
                Behavior on opacity { enabled: isAniEnabled; PropertyAnimation{duration:800}}
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: imgHome.scale = 1.2
                onExited: imgHome.scale = 1.0
                onClicked: {
                    min30.opacity = 0
                    tComp.opacity = 0
                    imgCompleted.opacity = 0
                    tRc.opacity = 0
                    showBtnTaste()

                    emit: home()
                }
            }
        }
    }

    Rectangle {
        id: sideMenu
        width: 200
        height: 1080
        color: "black"
        opacity: 0.7
        anchors.right: parent.right
        anchors.rightMargin: -1
        anchors.top: parent.top
        border.color: Qt.rgba(255,255,255,0.2)
        border.width: 1
        visible: opacity === 0 ? false : true
        z: 10

        Rectangle {
            id: back
            width: 200
            height: 193
            color: "transparent"


            Image {
                id: imgBack
                width: 48
                height: 48
                opacity: 0
                anchors.top: parent.top
                anchors.topMargin: 70
                anchors.horizontalCenter: parent.horizontalCenter
                source: "qrc:/imgs/back.png"
                Behavior on scale { PropertyAnimation{duration:200}}
                Behavior on opacity { enabled: isAniEnabled; PropertyAnimation{duration:800}}
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: imgBack.scale = 1.2
                onExited: imgBack.scale = 1.0
                onClicked: {
//                    showBtnTaste()
//                    backFromAutoSetting()

                    seqRunFun([showBtnTaste, resetAniWithAni, backFromAutoSetting], [100,300,100]);
                }
            }
        }

        Text {
            id: tAutoSetting
            height: 100
            opacity: 0
            color: "white"
            anchors.top: back.bottom
            anchors.topMargin: 0+70//
            anchors.horizontalCenter: parent.horizontalCenter
            text: "  Auto\nSetting"
            font.pixelSize: 20  //to 36
            font.family: "GothamBold"
            Behavior on font.pixelSize {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on anchors.topMargin {enabled: isAniEnabled; PropertyAnimation{duration:300}}
        }

        Rectangle {
            color: "white"
            width: 159
            height: 1
            opacity: 0.3
            anchors.bottom: iTaste.anchors.bottomMargin === 0 ? iAutoSetting.top : iTaste.top
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 58
        }

        Image {
            id: iTaste
            source: "qrc:/imgs/taste.png"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0 // to 101
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on anchors.bottomMargin {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on scale {enabled: isAniEnabled; PropertyAnimation{duration:200}}
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: iTaste.scale = 1.2
                onExited: iTaste.scale = 1.0
                onClicked: {
                    showBtnAutoSetting()
                    isTasteVisited = false
                }
            }
        }

        Image {
            id: iAutoSetting
            opacity: 0
            source: "qrc:/imgs/autoSetting.png"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0 // to 101
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on anchors.bottomMargin {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on scale {enabled: isAniEnabled; PropertyAnimation{duration:200}}
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: iAutoSetting.scale = 1.2
                onExited: iAutoSetting.scale = 1.0
                onClicked: {
                    showBtnTaste()
                    if (isTasteVisited) {
                        playAni()
                        isTasteVisited = false
                    }
                }
            }
        }
















        // menu of taste
        Text {
            id: tTaste
            height: 100
            opacity: 0
            color: "white"
            anchors.top: back.bottom
            anchors.topMargin: 0+70//
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Taste"
            font.pixelSize: 20  //to 36
            font.family: "GothamBold"
            Behavior on font.pixelSize {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on anchors.topMargin {enabled: isAniEnabled; PropertyAnimation{duration:300}}
        }

        Text {
            id: tIn
            height: 51
            color: "white"
            opacity: 0
            anchors.top: back.bottom
            anchors.topMargin: 102+100+50
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Spicy"
            font.pixelSize: 20
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:200;}}
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}
            Behavior on anchors.topMargin {enabled: isAniEnabled; PropertyAnimation{duration:300}}

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(0)
                    isTasteVisited = true
                }
            }
        }

        Text {
            id: ts1
            opacity: 0
            height: 51
            color: "white"
            anchors.top: tIn.bottom
            anchors.topMargin: 37
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Sweet"
            font.pixelSize: 20
            font.family: "GothamBook"

            Behavior on font.pixelSize { PropertyAnimation{duration:300}}
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}


            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(1)
                    isTasteVisited = true
                }
            }
        }

        Text {
            id: ts2
            opacity: 0
            height: 51
            color: "white"
            anchors.top: ts1.bottom
            anchors.topMargin: 37
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Soft"
            font.pixelSize: 20
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:300}}
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(2)
                    isTasteVisited = true
                }
            }
        }

        Text {
            id: ts3
            height: 51
            opacity: 0
            color: "white"
            anchors.top: ts2.bottom
            anchors.topMargin: 37
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Crisp"
            font.pixelSize: 20
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:300}}
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(3)
                    isTasteVisited = true
                }
            }
        }

        Text {
            id: ts4
            height: 51
            opacity: 0
            color: "white"
            anchors.top: ts3.bottom
            anchors.topMargin: 37
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Effort"
            font.pixelSize: 20
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:300}}
            Behavior on opacity {enabled: isAniEnabled; PropertyAnimation{duration:300}}

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(4)
                    isTasteVisited = true
                }
            }
        }



    }

    Rectangle {
        id: wt
        anchors.fill: parent
        color: "white"
        opacity: 0
        Behavior on opacity {enabled: isAniEnabled; PropertyAnimation { duration: 500}}
    }

//    Image {
//        id: bg
//        source: "qrc:/imgs/bgMicroWave.png"
//        anchors.fill: parent
//        opacity: 0
//        Behavior on opacity {enabled: isAniEnabled; PropertyAnimation { duration: 500}}
//    }


    Rectangle {
        id: bg
        color: "white"
        anchors.fill: parent
        opacity: 0.5
        Behavior on opacity {enabled: isAniEnabled; PropertyAnimation { duration: 500}}
    }

    Image {
        id: ck
        source: "qrc:/imgs/autosetting/chicken.png"
        anchors.centerIn: parent
        opacity: 0
        Behavior on opacity {enabled: isAniEnabled; PropertyAnimation { duration: 500}}
    }

    Image {
        id: chicken_ing
        source: "qrc:/imgs/chicken.png"
        anchors.centerIn: parent
        opacity: 0
        Behavior on opacity {enabled: isAniEnabled; PropertyAnimation { duration: 1000}}
    }

    Image {
        id: lig
        opacity: 0
        source: "qrc:/imgs/lighting.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.centerIn: parent
        Behavior on opacity {enabled: isAniEnabled; PropertyAnimation { duration: 500}}
    }

    Image {
        id: bigC
        opacity: 0
        width: 1284*1.5
        height: 30
        source: "qrc:/imgs/autosetting/circle_big.png"
        anchors.centerIn: parent
    }

    Image {
        id: midC
        opacity: 0
        width: 1284*1.5
        height: 30
        scale: 0.9
        source: "qrc:/imgs/autosetting/circle_mid.png"
        anchors.centerIn: parent
    }

    Image {
        id: smallC
        opacity: 0.2
        width: 1284*1.5
        height: 10
        source: "qrc:/imgs/autosetting/circle_small.png"
        anchors.centerIn: parent
    }


    Image {
        id: cw1100
        scale: 0.1
        opacity: 0
        width: 193
        height: 499
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 598
        anchors.topMargin: 149
        source: "qrc:/imgs/autosetting/1100g.png"
    }

    Image {
        id: data23045
        scale: 0.1
        opacity: 0
        width: 384
        height: 294
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 1080
        anchors.topMargin: 234
        source: "qrc:/imgs/autosetting/230_45.png"
    }

    Image {
        id: ot
        scale: 0.1
        opacity: 0
        width: 152
        height: 195
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 1220
        anchors.topMargin: 450
        source: "qrc:/imgs/autosetting/orangeTriangle.png"
    }


    SequentialAnimation {
        id: saSmall
        ParallelAnimation {
            PropertyAnimation { target:smallC; property:"height"; to:200; duration: 900}
            PropertyAnimation { target:smallC; property:"opacity"; to:1; duration: 900}
        }

        ParallelAnimation {
            PropertyAnimation { target:smallC; property:"height"; to:300; duration: 500}
            PropertyAnimation { target:smallC; property:"scale"; to:0.8; duration: 500}
        }

        ParallelAnimation {
            PropertyAnimation { target:smallC; property:"height"; to:200; duration: 900}
            PropertyAnimation { target:smallC; property:"scale"; to:0.75; duration: 900}
        }

        ParallelAnimation {
            PropertyAnimation { target:smallC; property:"height"; to:300; duration: 500}
            PropertyAnimation { target:smallC; property:"scale"; to:0.8; duration: 500}
        }

        PropertyAnimation { target:smallC; property:"scale"; to:0.8; duration: 2000}


        ParallelAnimation {
            PropertyAnimation { target:smallC; property:"height"; to:350; duration: 300}
            PropertyAnimation { target:smallC; property:"scale"; to:0.9; duration: 300}
        }
    }



    SequentialAnimation {
        id: saMid
        ParallelAnimation {
            PropertyAnimation { target:midC; property:"height"; to:200; duration: 900}
            PropertyAnimation { target:midC; property:"opacity"; to:1; duration: 900}
        }

        ParallelAnimation {
            PropertyAnimation { target:midC; property:"height"; to:300; duration: 500}
            PropertyAnimation { target:midC; property:"scale"; to:0.8; duration: 500}
        }

        ParallelAnimation {
            PropertyAnimation { target:midC; property:"height"; to:200; duration: 900}
            PropertyAnimation { target:midC; property:"scale"; to:0.75; duration: 900}
        }

        ParallelAnimation {
            PropertyAnimation { target:midC; property:"height"; to:300; duration: 500}
            PropertyAnimation { target:midC; property:"scale"; to:0.8; duration: 500}
        }

        PropertyAnimation { target:midC; property:"scale"; to:0.85; duration: 2000}


        ParallelAnimation {
            PropertyAnimation { target:midC; property:"height"; to:350; duration: 300}
            PropertyAnimation { target:midC; property:"scale"; to:0.9; duration: 300}
        }

        ParallelAnimation {
            PropertyAnimation { target:midC; property:"opacity"; to:0; duration: 1000}
            PropertyAnimation { target:midC; property:"scale"; to:1.0; duration: 1000}
        }

        PropertyAnimation { target:midC; property:"opacity"; to:0; duration: 500}

        SequentialAnimation {
            loops: Animation.Infinite


            PropertyAnimation { target:midC; property:"scale"; to:0.85; duration: 1}

            ParallelAnimation {
                PropertyAnimation { target:midC; property:"opacity"; to:1; duration: 1000}
                PropertyAnimation { target:midC; property:"scale"; to:0.9; duration: 1000}
            }

            ParallelAnimation {
                PropertyAnimation { target:midC; property:"opacity"; to:0; duration: 1000}
                PropertyAnimation { target:midC; property:"scale"; to:1; duration: 1000}
            }

            PropertyAnimation { target:midC; property:"opacity"; to:0; duration: 300}

        }
    }


    SequentialAnimation {
        id: saBig
        ParallelAnimation {
            PropertyAnimation { target:bigC; property:"height"; to:200; duration: 900}
            PropertyAnimation { target:bigC; property:"opacity"; to:1; duration: 900}
        }

        ParallelAnimation {
            PropertyAnimation { target:bigC; property:"height"; to:300; duration: 500}
            PropertyAnimation { target:bigC; property:"scale"; to:0.8; duration: 500}
        }

        ParallelAnimation {
            PropertyAnimation { target:bigC; property:"height"; to:200; duration: 900}
            PropertyAnimation { target:bigC; property:"scale"; to:0.75; duration: 900}
        }

        ParallelAnimation {
            PropertyAnimation { target:bigC; property:"height"; to:300; duration: 500}
            PropertyAnimation { target:bigC; property:"scale"; to:0.8; duration: 500}
        }

        PropertyAnimation { target:bigC; property:"scale"; to:0.85; duration: 2000}


        ParallelAnimation {
            PropertyAnimation { target:bigC; property:"height"; to:350; duration: 300}
            PropertyAnimation { target:bigC; property:"scale"; to:0.9; duration: 300}
        }

        ParallelAnimation {
            PropertyAnimation { target:bigC; property:"opacity"; to:0; duration: 1000}
            PropertyAnimation { target:bigC; property:"scale"; to:1.1; duration: 1000}
        }


        SequentialAnimation {
            loops: Animation.Infinite
            PropertyAnimation { target:bigC; property:"scale"; to:0.8; duration: 1}

            ParallelAnimation {
                PropertyAnimation { target:bigC; property:"opacity"; to:1; duration: 1000}
                PropertyAnimation { target:bigC; property:"scale"; to:1; duration: 1000}
            }

            ParallelAnimation {
                PropertyAnimation { target:bigC; property:"opacity"; to:0; duration: 1000}
                PropertyAnimation { target:bigC; property:"scale"; to:1.15; duration: 1000}
            }

            PropertyAnimation { target:bigC; property:"opacity"; to:0; duration: 300}
        }
    }


    SequentialAnimation {
        id: saData
        PropertyAnimation { target: cw1100; property: "opacity"; to: 0; duration: 5200;}
        PropertyAnimation { target: cw1100; properties: "scale, opacity"; to: 1.0; duration: 600;}
        PropertyAnimation { target: cw1100; properties: "scale"; to: 1.0; duration: 200;}
        PropertyAnimation { targets: [data23045, ot]; properties: "scale, opacity"; to: 1.0; duration: 600;}
    }




    function resetAniWithAni() {
        isAniEnabled = true
        tAutoSetting.opacity = 0
        tAutoSetting.anchors.topMargin = 0+70
        tAutoSetting.font.pixelSize = 20
        iAutoSetting.opacity = 0  // ?
        ck.opacity = 0
        chicken_ing.opacity = 0
        bg.opacity = 0
        imgBack.opacity = 0
        iTaste.anchors.bottomMargin = 0
        iTaste.scale = 0.3
        iTaste.opacity = 0

        lig.opacity = 0
        timerLig.stop()

        saSmall.stop()
        saMid.stop()
        saBig.stop()
        saData.stop()

        smallC.opacity = 0
        smallC.scale = 0.7
        smallC.width = 1284*1.5
        smallC.height = 10

        midC.opacity = 0
        midC.scale = 0.7
        midC.width = 1284*1.5
        midC.height = 10

        bigC.opacity = 0
        bigC.scale = 0.7
        bigC.width = 1284*1.5
        bigC.height = 10

        cw1100.opacity = 0
        cw1100.scale = 0.1
        data23045.opacity = 0
        data23045.scale = 0.1
        ot.opacity = 0
        ot.scale = 0.1

//        playpause.opacity = 0

        sideMenu.opacity = 0.7
        sideMenuHome.opacity = 0


        min30.opacity = 0
        min30.source = "qrc:/imgs/countdown/00_30.png"
        tComp.opacity = 0
        imgCompleted.opacity = 0
        tRc.opacity = 0

//        min30.text = "00:30"
        min30.ind = 30


        sound_taskStart.stop()
        sound_taskFinished.stop()

        wt.opacity = 0


        isAniEnabled = true
    }



    function resetAniOther() {
        isAniEnabled = false
        tAutoSetting.opacity = 0
        tAutoSetting.anchors.topMargin = 0+70
        tAutoSetting.font.pixelSize = 20
        iAutoSetting.opacity = 0  // ?
        ck.opacity = 0
        chicken_ing.opacity = 0
        bg.opacity = 0
        imgBack.opacity = 0
        iTaste.anchors.bottomMargin = 0
        iTaste.scale = 0.3
        iTaste.opacity = 0

        lig.opacity = 0
        timerLig.stop()

        saSmall.stop()
        saMid.stop()
        saBig.stop()
        saData.stop()

        smallC.opacity = 0
        smallC.scale = 0.7
        smallC.width = 1284*1.5
        smallC.height = 10

        midC.opacity = 0
        midC.scale = 0.7
        midC.width = 1284*1.5
        midC.height = 10

        bigC.opacity = 0
        bigC.scale = 0.7
        bigC.width = 1284*1.5
        bigC.height = 10

        cw1100.opacity = 0
        cw1100.scale = 0.1
        data23045.opacity = 0
        data23045.scale = 0.1
        ot.opacity = 0
        ot.scale = 0.1

        sideMenu.opacity = 0.0
        sideMenuHome.opacity = 0


        min30.opacity = 0
        min30.source = "qrc:/imgs/countdown/00_30.png"
        tComp.opacity = 0
        imgCompleted.opacity = 0
        tRc.opacity = 0

//        min30.text = "00:30"
        min30.ind = 30


        sound_taskStart.stop()
        sound_taskFinished.stop()


        isAniEnabled = true

        wt.opacity = 1
    }



    function resetAni() {
        timerShowWhite.stop()
        isAniEnabled = false
        tAutoSetting.opacity = 0
        tAutoSetting.anchors.topMargin = 0+70
        tAutoSetting.font.pixelSize = 20
        iAutoSetting.opacity = 0  // ?
        ck.opacity = 0
        chicken_ing.opacity = 0
        bg.opacity = 0
        imgBack.opacity = 0
        iTaste.anchors.bottomMargin = 0
        iTaste.scale = 0.3
        iTaste.opacity = 0

        lig.opacity = 0
        timerLig.stop()

        saSmall.stop()
        saMid.stop()
        saBig.stop()
        saData.stop()

        smallC.opacity = 0
        smallC.scale = 0.7
        smallC.width = 1284*1.5
        smallC.height = 10

        midC.opacity = 0
        midC.scale = 0.7
        midC.width = 1284*1.5
        midC.height = 10

        bigC.opacity = 0
        bigC.scale = 0.7
        bigC.width = 1284*1.5
        bigC.height = 10

        cw1100.opacity = 0
        cw1100.scale = 0.1
        data23045.opacity = 0
        data23045.scale = 0.1
        ot.opacity = 0
        ot.scale = 0.1

//        playpause.opacity = 0

        sideMenu.opacity = 0.7
        sideMenuHome.opacity = 0


        min30.opacity = 0
        min30.source = "qrc:/imgs/countdown/00_30.png"
        tComp.opacity = 0
        imgCompleted.opacity = 0
        tRc.opacity = 0

//        min30.text = "00:30"
        min30.ind = 30


        sound_taskStart.stop()
        sound_taskFinished.stop()

        wt.opacity = 0
        isAniEnabled = true
        showBtnTaste()
    }

    function playAni() {
        resetAni()
        tAutoSetting.opacity = 1
        tAutoSetting.anchors.topMargin = 0
        tAutoSetting.font.pixelSize = 36
        ck.opacity = 1.0
        bg.opacity = 0.5
        imgBack.opacity = 1.0
        iTaste.anchors.bottomMargin = 101
        iTaste.scale = 1
        iTaste.opacity = 1

        timerTest.start()
    }

    function playAniTaste() {
        resetAni()
        ck.opacity = 1.0
        bg.opacity = 0.5
        imgBack.opacity = 1.0
        iTaste.anchors.bottomMargin = 101
        iTaste.scale = 1
        iTaste.opacity = 1
        showBtnAutoSetting()
    }

    function showBtnTaste() {
        isAniEnabled = false
        hideTaste()
        isAniEnabled = true

        iAutoSetting.anchors.bottomMargin = 0
        iAutoSetting.scale = 0.3
        iAutoSetting.opacity = 0
        iTaste.opacity = 1
        iTaste.scale = 1
        iTaste.anchors.bottomMargin = 101

        tAutoSetting.opacity = 1
        tAutoSetting.anchors.topMargin = 0
        tAutoSetting.font.pixelSize = 36

    }

    function showBtnAutoSetting() {
        iTaste.anchors.bottomMargin = 0
        iTaste.scale = 0.3
        iTaste.opacity = 0
        iAutoSetting.opacity = 1
        iAutoSetting.scale = 1
        iAutoSetting.anchors.bottomMargin = 101

        tAutoSetting.opacity = 0
        tAutoSetting.anchors.topMargin = 70
        tAutoSetting.font.pixelSize = 20
        tTaste.anchors.topMargin = 0
        tTaste.font.pixelSize = 36
        tIn.anchors.topMargin = 202
        tTaste.opacity = 1
        resetStepText()
        setCurrentStep(2)
    }

    function hideTaste() {
        tTaste.opacity = 0
        var ss = [tIn, ts1, ts2, ts3, ts4]
        ss.forEach(i => {
                       i.opacity = 0
                       i.font.pixelSize = 20
                   })

        tIn.anchors.topMargin = 202+50
        tTaste.anchors.topMargin = 70
        tTaste.font.pixelSize = 20
    }

    function resetCircle() {
        print("resetci")
        saSmall.stop()
        saMid.stop()
        saBig.stop()
        saData.stop()

        smallC.opacity = 0
        smallC.scale = 0.7
        smallC.width = 1284*1.5
        smallC.height = 10

        midC.opacity = 0
        midC.scale = 0.7
        midC.width = 1284*1.5
        midC.height = 10

        bigC.opacity = 0
        bigC.scale = 0.7
        bigC.width = 1284*1.5
        bigC.height = 10

        cw1100.opacity = 0
        cw1100.scale = 0.1
        data23045.opacity = 0
        data23045.scale = 0.1
        ot.opacity = 0
        ot.scale = 0.1
    }


    function resetStepText() {
        var ss = [tIn, ts1, ts2, ts3, ts4]
        ss.forEach(i => {
                       i.opacity = 0.25
                       i.font.pixelSize = 32
                   })
    }

    function setCurrentStep(stepIndex) {
        resetStepText()
        var theI = null
        switch(stepIndex) {
        case 0:
            theI = tIn
            break;
        case 1:
            theI = ts1
            break;
        case 2:
            theI = ts2
            break;
        case 3:
            theI = ts3
            break;
        case 4:
            theI = ts4
            break;
        default:
            break;
        }
        theI.opacity = 1.0
        theI.font.pixelSize = 32

        resetCircle()
//        playpause.opacity = 0.4
        lig.opacity = 1
        timerLig.start()
    }

    Text {
        id: tRc
        width: 697
        height: 85
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 180
        anchors.left: parent.left
        anchors.leftMargin: 622
        text: "Roast Chicken"
        color: "white"
        font.pixelSize: 96
        font.family: "GothamBold"
        opacity: 0
        Behavior on opacity { PropertyAnimation { duration: 300;}}
    }

//    Text {
//        id: min30
//        anchors.top: parent.top
//        anchors.horizontalCenter: parent.horizontalCenter
//        text: "00:30"
//        color: "white"
//        font.pixelSize: 360
//        font.family: "UNDA Circle"
//        font.letterSpacing: 10
//        opacity: 0
//        Behavior on opacity { PropertyAnimation { duration: 300;}}
//    }


    Image {
        id: min30
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.horizontalCenter: parent.horizontalCenter
        property int ind: 30
        source: "qrc:/imgs/countdown/00_30.png"
        opacity: 0
        Behavior on opacity { PropertyAnimation { duration: 300;}}
    }



    Image {
        id: imgCompleted
        width: 240
        height: 240
        source: "qrc:/imgs/menumode/completed.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 219
        opacity: 0
        Behavior on opacity { PropertyAnimation { duration: 300;}}
    }

    Image {
        id: tComp
        width: 880
        height: 225
        anchors.top: parent.top
        anchors.topMargin: 462
        anchors.left: parent.left
        anchors.leftMargin: 520
//        text: "Completed"
//        color: "white"
//        font.pixelSize: 240
//        font.family: "UNDA Circle"
        source: "qrc:/imgs/complete.png"
        opacity: 0
        Behavior on opacity { PropertyAnimation { duration: 300;}}
    }

    function showBlack() {
//        playpause.opacity = 0
        sideMenu.opacity = 0
        ck.opacity = 0
        bg.opacity = 0
        lig.opacity = 0
        timerLig.stop()
    }

    function show30min() {
//        chicken_ing.opacity = 1
//        tRc.opacity = 1
//        min30.opacity = 1
        bg.opacity = 0.5
        saShow30min.start()
        timerCountDown.start()
    }

    function show15min() {
        min30.text = "00:15"
    }

    function showCompleted() {
//        min30.opacity = 0
//        tComp.opacity = 1
//        imgCompleted.opacity = 1
//        sideMenuHome.opacity = 0.7
        saShowCompleted.start()
        sound_taskFinished.play()

        timerShowWhite.start()
    }

    SequentialAnimation {
        id: saShowCompleted
        ParallelAnimation {
            PropertyAnimation {targets:[imgCompleted,tComp]; property:"opacity"; from:0; to:1; duration: 300;}
            PropertyAnimation {targets:[min30]; property:"opacity"; from:1; to:0; duration: 300;}
            PropertyAnimation {targets:[sideMenuHome]; property:"opacity"; from:0; to:0.7; duration: 500;}
        }
    }

    SequentialAnimation {
        id: saShow30min
        ParallelAnimation {
            PropertyAnimation {targets:[tRc,min30]; property:"opacity"; from:0; to:1; duration: 300;}
            PropertyAnimation {targets:[chicken_ing]; property:"opacity"; from:0; to:1; duration: 1000;}
        }
    }


    Timer {
        id: timerTest
        repeat: false
        interval: 500
        onTriggered: {
            saSmall.start()
            saMid.start()
            saBig.start()
            saData.start()
            showBtnTaste()
        }
    }

    Timer {
        id: timerCountDown
        repeat: true
        interval: 1000
        onTriggered: {
//            var t = min30.text.split(":")[1]-""
//            t -= 1
//            if (t < 0) {
//                timerCountDown.stop()
//                return
//            }

//            if (t < 10) {
//                t = "0"+t
//            }

//            min30.text = "00:"+t

            min30.ind -= 1
            if (min30.ind < 1) {
                timerCountDown.stop()
                return
            }
            var t = min30.ind + ""
            if (min30.ind < 10)  {
                t = '0'+min30.ind
            }
            var tSrc = "qrc:/imgs/countdown/00_"+t+".png"
            min30.source = tSrc
        }
    }


    function emitBack() {
        backFromAutoSetting()
    }


    property int nSaIndex: 0
    property var arrFuns: []
    property var arrInters: []
    Timer {
        id: timerSa
        repeat: true
        onTriggered: {
            nSaIndex += 1
            if (nSaIndex === arrFuns.length) {
                nSaIndex = 0
                stop()
                return
            }
            interval = arrInters[nSaIndex]
            arrFuns[nSaIndex]()
        }
    }


    function seqRunFun(funs, inters) {
        arrFuns = funs
        arrInters = inters
        timerSa.interval = arrInters[0]
        var theSa = arrFuns[0]
        theSa()
        timerSa.start()
    }


    function startTask() {
        resetAni()
        sound_taskStart.play()
        seqRunFun([showBlack, show30min, showCompleted], [600,30500,3000])
    }



}



